<template>
  <v-card class="menu-container">
    <v-navigation-drawer class="primary" permanent dark width="80">
      <v-list class="menu-list">
        <v-list-item
          v-for="item in items"
          :key="item.id"
          :ripple="false"
          link
          v-on:click="menuNavigation(item.id)"
        >
          <v-list-item-icon
            class="menu-icon ma-0"
            :class="
              item.childrenNames.includes(currentRouteId) ? 'checked' : ''
            "
          >
            <v-tooltip right>
              <template v-slot:activator="{ on, attrs }">
                <v-btn
                  plain
                  color="rgba(0,0,0,0)"
                  dark
                  v-bind="attrs"
                  v-on="on"
                  depressed
                >
                  <v-icon>{{ item.icon }}</v-icon>
                </v-btn>
              </template>
              <span>{{ item.title }}</span>
            </v-tooltip>
          </v-list-item-icon>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-navigation-drawer
      class="secondary"
      :dark="mini"
      permanent
      mini-variant-width="30"
      width="360"
      @update:mini-variant="toggleInbox"
      :mini-variant="mini"
    >
      <!-- expand-on-hover -->
      <div style="width: 100%" @mouseleave="toggleInbox">
        <Inbox />
      </div>
      <v-overlay
        :absolute="absolute"
        :opacity="opacity"
        :value="overlay"
        :color="overlayColor"
        @click="toggleInbox"
        class="pointer"
      >
        <v-icon color="rgba(255,255,255,0.5)">mdi-menu-right</v-icon>
      </v-overlay>
    </v-navigation-drawer>
  </v-card>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { routeMapping, router } from "@/router";
import {
  catchRouteErr,
  isValidKey,
  removeBlank,
} from "@/common/constants/Utils";
import Inbox from "../Inbox/Inbox.vue";

interface IItem {
  id: string;
  title: string;
  icon: string;
  childrenNames: Array<string>;
}

@Component({
  components: {
    Inbox,
  },
})
export default class Menu extends Vue {
  absolute = true;
  opacity = 1;
  overlay = true;
  overlayColor = "rgba(59, 71, 101,1)";
  mini = true;
  open = false;

  get items(): Array<IItem> {
    return this.$store.state.menuList;
  }

  // 由于 v-navigation-drawer 组件事件非常有局限性，所以只能在两个组件（v-navigation-drawer 和 v-overlay）调用这个方法
  toggleInbox() {
    console.log("Toggle");
    this.open = !this.open;
    this.mini = !this.mini;
    this.overlay = !this.overlay;
  }

  setItemsChildrenNames() {
    this.items.forEach((item) => {
      this.$set(
        item,
        "childrenNames",
        this.getChildrenNames(removeBlank(item.title), routeMapping)
      );
    });
  }

  getChildrenNames(rootName: string, currentRouteMapping: object) {
    let nameArr: Array<string> = [];

    if (isValidKey(rootName, currentRouteMapping)) {
      const rootRoute = currentRouteMapping[rootName];
      // 有子路由的页面类型是object
      if (typeof rootRoute === "object" && rootRoute !== null) {
        const rootRouteKeys: Array<string> = Object.keys(rootRoute);
        rootRouteKeys.forEach((key) => {
          const routeValue = rootRoute[key];
          // 如果路由的值还是对象就说明还有子路由再进行递归直到拿到最底层所有子路由的name
          if (typeof routeValue === "object") {
            nameArr.push(...this.getChildrenNames(removeBlank(key), rootRoute));
          } else {
            nameArr.push(routeValue);
          }
        });
      } else {
        // 没有子路由的则是字符串的路由名
        nameArr.push(currentRouteMapping[rootName]);
      }
    }
    return nameArr;
  }

  menuNavigation(routeId: string) {
    switch (routeId) {
      case routeMapping.DashBoard:
        router.push({ name: routeMapping.DashBoard }).catch((err) => {
          catchRouteErr(err);
        });
        break;
      case routeMapping.Customer.name:
        router.push({ name: routeMapping.Customer.name }).catch((err) => {
          catchRouteErr(err);
        });
        break;
      case routeMapping.PendingJob:
        router.push({ name: routeMapping.PendingJob }).catch((err) => {
          catchRouteErr(err);
        });
        break;
      case routeMapping.Project:
        router.push({ name: routeMapping.Project }).catch((err) => {
          catchRouteErr(err);
        });
        break;
      case routeMapping.Maintenance.name:
        router.push({ name: routeMapping.Maintenance.name }).catch((err) => {
          catchRouteErr(err);
        });
        break;
      case routeMapping.Library:
        router.push({ name: routeMapping.Library }).catch((err) => {
          catchRouteErr(err);
        });
        break;
      case routeMapping.Kiosk:
        router.push({ name: routeMapping.Kiosk }).catch((err) => {
          catchRouteErr(err);
        });
        break;
      case routeMapping.JobSheet:
        router.push({ name: routeMapping.JobSheet }).catch((err) => {
          catchRouteErr(err);
        });
        break;
      case routeMapping.Quotation:
        router.push({ name: routeMapping.Quotation }).catch((err) => {
          catchRouteErr(err);
        });
        break;
      case routeMapping.Invoice:
        router.push({ name: routeMapping.Invoice }).catch((err) => {
          catchRouteErr(err);
        });
        break;
      default:
        break;
    }
  }

  get currentRouteId(): string {
    //因为这里使用的vue类组件，所以与常规用法有所区别，这里的get相当于计算属性computed
    return this.$route.name ?? "";
  }

  mounted() {
    this.setItemsChildrenNames();
  }
}
</script>

<style lang="scss">
@import "@/components/Menu/Menu.scss";
</style>
